<template>
	<view class="conter">
		<view class="input-item">
			<u--input v-model="loginForm.phone" class="icon-pass" prefixIcon="请输入手机号:"></u--input>
		</view>
		<view class="akpapa">
			<u--input v-model="code" prefixIcon="验证码:" class="icon-patu" border="surround"></u--input>
			<button v-if="phoneCodeStatus" @click="getcode">获取验证码</button>
			<!-- 	<text class="code" v-if="phoneCodeStatus" @click="getcode">获取验证码</text>
			<span v-else>重发({{ phoneCodeTime }}s)</span> -->
			<button v-else>重发({{ phoneCodeTime }}s)</button>
		</view>
		<view class="aktutu">
			<text>说明：</text>
			<view>一、注销账户前，请先关闭钱包续费功能，并全部提现。</view>
			<view>二、账户注销后，账户下的订单无法找回，昵称，头像钱包地址等个人信息会被删除。</view>
			<view>三、注销后，该账号无法登录。</view>
		</view>
		<u-popup bgColor='transparent' class="u-popup" :show="show" mode="center" @close="closePopupCode" :closeable="true">
			<view class="popup_box">
				<view class="input-item flex align-center" style="width: 50%" v-if="captchaEnabled">
					<view class="iconfont icon-code icon"></view>
					<input v-model="imgcode" class="input" placeholder="请输入图形码" maxlength="5" />
					<view class="login-code">
						<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
					</view>
				</view>
				<button @click="confirmCode" class="confirm-txt">确定</button>
			</view>
		</u-popup>
		<button class="buttons" @click="loginOutCode">确认注销</button>
		<u-modal :show="loginOutShow" width="500rpx" :content="loginOutContent" showCancelButton @cancel="loginOutShow = false" @confirm="checkAccount"></u-modal>
	</view>
</template>

<script>
import { getCodeImg, verification } from '@/api/login';
import { updateTransactionPassword } from '@/api/account/account.js';
import { v4 as uuidv4 } from 'uuid';
import { getUserAdmin } from '@/utils/auth';
import { toast } from '../../../utils/common';
import { logOff } from '@/api/account/account.js';
export default {
	data() {
		return {
			captchaEnabled: true,
			code: '',
			password: '',
			loginForm: {
				phone: '',
				uuid: ''
			},
			phoneCodeStatus: true, //发送验证码状态
			phoneShow: false,
			phoneCodeTime: 60,
			show: false,
			imgcode: '',
			codeUrl: '',
			loginOutShow: false, //退出登录弹出层
			loginOutContent: '确定要注销账号吗？'
		};
	},
	created() {
		this.getUserDetail();
		this.getCode();
	},
	methods: {
		async checkAccount() {
			const data = await logOff();
			if (data.code === 200) {
				this.$modal.msgSuccess('注销成功');
				uni.clearStorage();
				this.loginOutShow = false;
				setTimeout(function () {
					uni.navigateTo({
						url: '/pages/login'
					});
				}, 700);
			} else {
				this.$modal.msgError(data.msg);
			}
		},
		loginOutCode() {
			if (this.loginForm.phone == '') {
				toast('你还没有输入想注销的手机号');
			} else if (this.code == '') {
				toast('你还没有输入验证码');
			} else {
				this.loginOutShow = true;
			}
		},
		closePopupCode() {
			this.show = false;
			this.imgcode = '';
		},
		getcode() {
			if (this.loginForm.phone !== '') {
				this.show = true;
			} else {
				toast('请先输入手机号');
			}
		},
		getCode() {
			let uuid = uuidv4();
			getCodeImg(uuid).then((res) => {
				const url = window.URL.createObjectURL(new Blob([res]));
				this.codeUrl = url;
				this.loginForm.uuid = uuid;
			});
		},
		confirmCode() {
			verification(this.loginForm, this.imgcode).then((res) => {
				this.show = false;
				this.startTime();
			});
		},
		// 倒计时
		startTime() {
			this.phoneCodeTime = 60;
			this.phoneCodeStatus = false;
			if (this.interval) {
				clearInterval(this.interval);
			}
			this.interval = setInterval(() => {
				// 使用箭头函数
				this.phoneCodeTime = this.phoneCodeTime - 1;
				if (this.phoneCodeTime < 1) {
					this.phoneCodeStatus = true;
					clearInterval(this.interval);
				}
			}, 1000);
		},
		getUserDetail() {
			let detail = getUserAdmin();
			if (detail) {
				this.loginForm.phone = detail.phone;
			} else {
				//不为真的情况需要调用获取用户信息接口,存储完之后再次调用自己
				this.refreshUserInfo();
			}
		},
		async confirmSafeCode() {
			let passwordReg = /[^a-zA-Z0-9@.]$/g;
			if (this.loginForm.phone == '') {
				toast('请先输入手机号');
			} else if (this.code == '') {
				toast('您还没输入验证码');
			} else if (this.password == '') {
				toast('您还没输入安全密码');
			} else if (this.password.length < 6) {
				toast('密码必须为6位');
			} else {
				let param = {};
				param.phone = this.loginForm.phone;
				param.transactionPassword = this.password;
				param.verificationCode = this.code;
				const res = await updateTransactionPassword(param);
				// console.log(res, 'res');
			}
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep .u-icon__icon {
	font-size: 31rpx !important;
	font-family:"font"; 
	font-weight: 400 !important;
	color: #8a92a3 !important;
}
::v-deep .uni-input-input {
	color: #ffffff;
	margin-top: 1rpx;
}
.conter {
	.icon-pass {
		width: 680rpx;
		height: 78rpx;
		background: #15142d;
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		margin: 0 34.88rpx;
		border: none;
	}

	.akpapa {
		width: 713rpx;
		position: relative;

		.icon-patu {
			width: 359rpx;
			height: 78rpx;
			background: #15142d;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			margin: 34.88rpx 34.88rpx;
			border: none;
		}

		button {
			width: 303rpx;
			height: 78rpx;
			background: #8A92A3;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			font-size: 31rpx;
			font-family:"font"; 
			font-weight: 500;
			color:#130F26;
			line-height: 85rpx;
			position: absolute;
			top: 0;
			right: 0;
		}
	}

	.aktutu {
		font-size: 21rpx;
		font-family:"font"; 
		font-weight: 400;
		color: #8a92a3;
		margin: 60rpx 34.88rpx;
	}

	.buttons {
		width: 680rpx;
		height: 77rpx;
		background: linear-gradient(90deg, #3ADFEB 0%, #4463FF 100%);
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		font-size: 28rpx;
		font-family:"font"; 
		font-weight: 400;
		color: #ffffff;
		line-height: 85rpx;
		position: fixed;
		bottom: 15rpx;
		margin: 0 34.88rpx;
	}
}

.u-popup {
	background: none;
}
.name {
	width: 300rpx;
	display: flex;
	opacity: 1;
	position: relative;
}

.box {
	border-bottom: none !important;
}
.code {
	color: #f07e3d;
}
.popup_box {
	width: 600rpx;
	height: 400rpx;
	background: #fff;
	border-radius: 20rpx;
	.confirm-txt {
		width: 200rpx;
		height: 70rpx;
		color: #fff;
		font-size: 28rpx;
		font-family:"font"; 
		font-weight: 400;
		background: linear-gradient(90deg, #eb703a 0%, #ffb344 100%);
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		opacity: 1;
	}
	.input-item {
		margin: 100rpx 30rpx;
		background: #0d0e12;
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		opacity: 1;
		border: 2rpx solid #3c424d;
		color: #ffffff;
		.icon {
			font-size: 38rpx;
			margin-left: 10px;
			color: #999;
		}
		.input {
			width: 100%;
			font-size: 14px;
			line-height: 20px;
			text-align: left;
			padding-left: 15px;
		}
	}
	.login-code {
		height: 38px;
		float: right;
		.login-code-img {
			height: 38px;
			position: absolute;
			margin-left: 10px;
			width: 200rpx;
		}
	}
}
.confirm-btn {
	width: 680rpx;
	height: 77rpx;
	background: linear-gradient(90deg, #3ADFEB 0%, #4463FF 100%);
	box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
	border-radius: 14rpx;
	opacity: 1;
	margin: 310rpx 34.88rpx;
	text-align: center;
	line-height: 77rpx;
	font-size: 28rpx;
	font-family:"font"; 
	font-weight: 800;
	color: #ffffff;
}
</style>
